<template>
  <div>
    <!-- 标题 -->
    <van-nav-bar :title="$route.name" left-arrow @click-left="$router.back()"/>
    <!-- 已登录状态 -->
    <div v-if="getUser" class="userinfo">
      <van-image round width="80px" height="80px" :src="getUser.avatarurl"/>
      <p>{{ getUser.nickname }}</p>
      <van-button @click="logout" type="primary" size="small">退出</van-button>
    </div>
    <div class="userinfo" v-else>
      <van-image
        round
        width="80px"
        height="80px"
        src="https://img1.baidu.com/it/u=1244239780,4153872155&fm=26&fmt=auto"
      />
      <p>XXX</p>
      <van-button @click="$router.push('/login')" type="primary" size="small">去登录</van-button>
      <!-- 静态格子 -->
      <van-grid :column-num="4" :border="false">
        <van-grid-item>
          <van-image :src="require('../assets/images/mine/payment.png')"/>
          <p class="navtitle">待付款</p>
        </van-grid-item>
        <van-grid-item>
          <van-image :src="require('../assets/images/mine/delivery.png')"/>
          <p class="navtitle">待收货</p>
        </van-grid-item>
        <van-grid-item>
          <van-image :src="require('../assets/images/mine/evaluation.png')"/>
          <p class="navtitle">评价</p>
        </van-grid-item>
        <van-grid-item>
          <van-image :src="require('../assets/images/mine/service.png')"/>
          <p class="navtitle">售后/退款</p>
        </van-grid-item>
      </van-grid>
      <!-- 单元格展示 -->
      <div class="gz">
        <van-cell icon="location-o" title="地址管理" is-link/>
      <van-cell icon="balance-o" title="我的钱包" is-link/>
      <van-cell icon="scan" title="我二维码" is-link/>
      <van-cell icon="friends-o" title="我的小伙伴" is-link/>
      </div>
      
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["getUser"])
  },
  methods: {
    //退出
    logout() {
      this.$store.dispatch("changeUser", false);
    }
  }
};
</script>

<style scoped>
.userinfo {
  text-align: center;
}
.an-nav-bar{
  background: red;
  height: 50px;
}
.van-grid{
  width: 96%;
  border: 1px solid #000;
  border-radius: 10px;
  box-sizing: border-box;
  margin: 0 auto;
}
.van-cell{
  border-bottom: 1px solid #333;
  width: 96%;
  margin: 0 auto;
  background: lightgoldenrodyellow
}
.gz{
  margin-top: 10px;
}
</style>
